<!-- 图表设置组件 -->
<template>
  <div>
    <el-form
      ref="settingForm"
      class="demo-form-inline"
      :inline="true"
      :model="component"
      label-position="left"
      size="mini"
    >
      <el-collapse v-model="formCollapse">
        <el-collapse-item title="常规配置" name="generalConfig">
          <el-form-item label="图表类型">
            <span>{{ getChartType() }}</span>
          </el-form-item>
          <div v-if="!isPreview">
            <div
              class="cus-collapse-header df-c-b"
              @click="dataSetOpen = !dataSetOpen"
            >
              <span>数据设置</span>
              <i
                :class="dataSetOpen ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
              />
            </div>
            <div v-show="dataSetOpen" class="cus-collapse-content">
              <el-form-item label="行列转置">
                <el-switch
                  v-model="component.rangeConfigCheck"
                  @change="rowColTrans()"
                />
              </el-form-item>
              <el-form-item
                v-if="!isCoedit"
                label="数据集"
                class="df-form-item"
              >
                <el-select
                  v-model="component.dataset"
                  placeholder="请选择"
                  style="width: 100%"
                  @change="changeDataset(false)"
                >
                  <el-option
                    v-for="item in datasets"
                    :key="item.datasetName"
                    :label="item.datasetName"
                    :value="item.datasetName"
                  />
                </el-select>
              </el-form-item>
              <el-form-item
                v-if="!isCoedit"
                label="分组字段"
                class="df-form-item"
              >
                <el-select
                  v-model="component.categoryField"
                  placeholder="请选择"
                  style="width: 100%"
                >
                  <el-option
                    v-for="item in datasetColumns"
                    :key="item.name"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </el-form-item>
              <el-form-item
                v-if="!isCoedit"
                label="数值字段"
                class="df-form-item"
              >
                <el-select
                  v-model="component.valueField"
                  placeholder="请选择"
                  style="width: 100%"
                  multiple
                >
                  <el-option
                    v-for="item in datasetColumns"
                    :key="item.name"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </el-form-item>
              <el-form-item
                v-if="component.chartAllType.indexOf('pie') <= 0 && !isCoedit"
                label="系列字段"
                class="df-form-item"
              >
                <el-select
                  v-model="component.seriesField"
                  placeholder="请选择"
                  style="width: 100%"
                  multiple
                >
                  <el-option
                    v-for="item in datasetColumns"
                    :key="item.name"
                    :label="item.name"
                    :value="item.name"
                  />
                </el-select>
              </el-form-item>
            </div>

            <el-form-item label="显示标题" style="margin: 14px 0 12px 0">
              <el-switch
                v-model="component.defaultOption.spec.title.visible"
                @change="reLoadChart()"
              />
            </el-form-item>
            <div
              v-show="component.defaultOption.spec.title.visible"
              class="cus-collapse-content"
            >
              <el-form-item
                v-if="component.defaultOption.spec.title.visible"
                class="df-form-item"
                label="标题内容"
              >
                <el-input
                  v-model="component.defaultOption.spec.title.text"
                  style="width: 100%"
                  @change="reLoadChart()"
                />
              </el-form-item>
              <el-form-item
                v-if="component.defaultOption.spec.title.visible"
                label="对齐方式"
                class="df-form-item"
              >
                <el-select
                  v-model="component.defaultOption.spec.title.align"
                  placeholder="请选择"
                  style="width: 100%"
                  @change="reLoadChart()"
                >
                  <el-option
                    v-for="item in selectUtil.textAlign"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item
                v-if="component.defaultOption.spec.title.visible"
                label="字体颜色"
                class="df-form-item"
              >
                <input-color-picker
                  :input-width="140"
                  :value="component.defaultOption.spec.title.textStyle.fill"
                  @change="
                    (val) => {
                      component.defaultOption.spec.title.textStyle.fill = val;
                      reLoadChart();
                    }
                  "
                />
              </el-form-item>
            </div>
          </div>
        </el-collapse-item>

        <el-collapse-item title="图表装修" name="chartStyle">
          <!-- <div
            class="cus-collapse-header df-c-b"
            @click="setWidthAndHeightOpen = !setWidthAndHeightOpen"
          >
            <span>设置尺寸</span>
            <i
              :class="
                setWidthAndHeightOpen
                  ? 'el-icon-arrow-up'
                  : 'el-icon-arrow-down'
              "
            />
          </div> -->
          <div v-show="setWidthAndHeightOpen" class="cus-collapse-content">
            <div
              v-if="component.chartAllType.toLowerCase().indexOf('pie') >= 0"
            >
              <el-form-item class="df-form-item" label="外半径(0-1)">
                <el-button
                  type="text"
                  icon="el-icon-minus"
                  @click="radiusMiuns('1')"
                />
                <el-input
                  v-model="component.defaultOption.spec.outerRadius"
                  @change="changeRadius('1')"
                />
                <el-button
                  type="text"
                  icon="el-icon-plus"
                  @click="radiusPlus('1')"
                />
              </el-form-item>
              <el-form-item class="df-form-item" label="内半径(0-1)">
                <el-button
                  type="text"
                  icon="el-icon-minus"
                  @click="radiusMiuns('2')"
                />
                <el-input
                  v-model="component.defaultOption.spec.innerRadius"
                  @change="changeRadius('2')"
                />
                <el-button
                  type="text"
                  icon="el-icon-plus"
                  @click="radiusPlus('2')"
                />
              </el-form-item>
              <el-form-item class="df-form-item" label="扇区间隔">
                <el-input
                  v-model="component.defaultOption.spec.padAngle"
                  style="width: 100%"
                  @change="reLoadChart()"
                />
              </el-form-item>
              <el-form-item class="df-form-item" label="圆角">
                <el-input
                  v-model="component.defaultOption.spec.pie.style.cornerRadius"
                  style="width: 100%"
                  @change="reLoadChart()"
                />
              </el-form-item>
            </div>
            <div
              v-if="component.chartAllType.toLowerCase().indexOf('radar') >= 0"
            >
              <!-- <el-form-item label="雷达图设置" class="customLabel" /><br> -->
              <el-form-item class="df-form-item" label="折线宽度">
                <el-input
                  v-model="component.defaultOption.spec.line.style.lineWidth"
                  style="width: 100%"
                  @change="reLoadChart()"
                />
              </el-form-item>
              <el-form-item class="df-form-item" label="区域显示">
                <el-switch
                  v-model="component.defaultOption.spec.area.visible"
                  @change="reLoadChart()"
                /> </el-form-item><br>
              <el-form-item class="df-form-item" label="圆形网格">
                <el-switch
                  v-model="component.defaultOption.spec.axes[0].grid.smooth"
                  @change="reLoadChart()"
                /> </el-form-item><br>
              <el-form-item class="df-form-item" label="坐标轴颜色">
                <input-color-picker
                  :input-width="140"
                  :value="
                    component.defaultOption.spec.axes[0].grid.style.stroke
                  "
                  @change="
                    (val) => {
                      component.defaultOption.spec.axes[0].grid.style.stroke =
                        val;
                      changeRadarColor(chartsComponents, component);
                    }
                  "
                /> </el-form-item><br>
              <el-form-item class="df-form-item" label="轴标签颜色">
                <input-color-picker
                  :input-width="140"
                  :value="component.defaultOption.spec.axes[1].label.style.fill"
                  @change="
                    (val) => {
                      component.defaultOption.spec.axes[1].label.style.fill =
                        val;
                      changeRadarLabelColor(chartsComponents, component);
                    }
                  "
                /> </el-form-item><br>
            </div>
            <div
              v-if="
                component.chartAllType.toLowerCase().indexOf('line') >= 0 ||
                  component.chartAllType.toLowerCase().indexOf('area') >= 0 ||
                  component.chartAllType.toLowerCase().indexOf('column') >= 0 ||
                  component.chartAllType.toLowerCase().indexOf('bar') >= 0
              "
            >
              <el-form-item
                :label="getColorLabel() + '设置'"
                class="customLabel"
              /><br>
              <el-form-item
                v-if="
                  component.chartAllType.toLowerCase().indexOf('line') >= 0 ||
                    component.chartAllType.toLowerCase().indexOf('area') >= 0
                "
                class="df-form-item"
                :label="getColorLabel() + '宽度'"
              >
                <el-input
                  v-model="component.defaultOption.spec.line.style.lineWidth"
                  style="width: 100%"
                  @change="reLoadChart()"
                />
              </el-form-item>
              <el-form-item
                v-if="
                  component.chartAllType.toLowerCase().indexOf('column') >= 0 ||
                    component.chartAllType.toLowerCase().indexOf('bar') >= 0
                "
                class="df-form-item"
                :label="getColorLabel() + '宽度'"
              >
                <el-input
                  v-model="component.defaultOption.spec.barWidth"
                  style="width: 100%"
                  @change="reLoadChart()"
                />
              </el-form-item>
              <el-form-item
                v-if="
                  component.chartAllType.toLowerCase().indexOf('column') >= 0 ||
                    component.chartAllType.toLowerCase().indexOf('bar') >= 0
                "
                class="df-form-item"
                label="圆角"
              >
                <el-input
                  v-model.number="
                    component.defaultOption.spec.bar.style.cornerRadius
                  "
                  @change="reLoadChart()"
                />
              </el-form-item>
              <el-form-item
                v-if="
                  component.chartAllType.toLowerCase().indexOf('line') >= 0 ||
                    component.chartAllType.toLowerCase().indexOf('area') >= 0
                "
                class="df-form-item"
                label="折线标签"
              >
                <el-switch
                  v-model="component.defaultOption.spec.lineLabel.visible"
                  @change="reLoadChart()"
                />
              </el-form-item>
              <el-form-item
                v-if="
                  (component.chartAllType.toLowerCase().indexOf('line') >= 0 ||
                    component.chartAllType.toLowerCase().indexOf('area') >=
                    0) &&
                    component.defaultOption.spec.lineLabel.visible
                "
                class="df-form-item"
                label="标签位置"
              >
                <el-select
                  v-model="component.defaultOption.spec.lineLabel.position"
                  placeholder="请选择"
                  style="width: 100%"
                  @change="reLoadChart()"
                >
                  <el-option
                    v-for="item in screenConstants.lineLabelPosition"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
              <el-form-item
                v-if="
                  (component.chartAllType.toLowerCase().indexOf('line') >= 0 ||
                    component.chartAllType.toLowerCase().indexOf('area') >=
                    0) &&
                    component.defaultOption.spec.lineLabel.visible
                "
                class="df-form-item"
                label="标签颜色"
              >
                <input-color-picker
                  :value="component.defaultOption.spec.lineLabel.style.fill"
                  @change="
                    (val) => {
                      component.defaultOption.spec.lineLabel.style.fill = val;
                      reLoadChart();
                    }
                  "
                />
              </el-form-item>
            </div>
          </div>

          <div class="cus-collapse-header df-c-b" style="margin: 12px 0 0px">
            <span>色系设置</span>
            <el-button
              type="primary"
              size="mini"
              class="addBtn"
              @click="addColor(component)"
            ><i class="el-icon-plus el-icon--left" />添加</el-button>
          </div>
          <el-form-item
            style="width: 100%; margin-bottom: 12px"
            class="df-form-item"
          >
            <el-select
              v-model="systemColor"
              placeholder="请选择"
              style="width: 100%"
              @change="changeSystemColor"
            >
              <el-option
                v-for="item in screenConstants.systemChartColorsNames"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <div
            v-show="component.defaultOption.spec.color.length"
            class="cus-collapse-content"
          >
            <el-form-item
              v-for="(item, index) in component.defaultOption.spec.color"
              :key="index"
              label=""
            >
              <div style="position: relative">
                <el-color-picker
                  v-model="component.defaultOption.spec.color[index]"
                  size="mini"
                  @change="reLoadChart()"
                />
                <i
                  class="el-icon-error"
                  style="
                    cursor: pointer;
                    position: absolute;
                    top: 12px;
                    right: -2px;
                  "
                  @click="confirmDeleteColor(index)"
                />
              </div>
            </el-form-item>
            <div style="text-align: center">
              <el-link
                type="info"
                @click="clearColor(component)"
              ><i class="el-icon-delete el-icon--left" />清空</el-link>
            </div>
          </div>
        </el-collapse-item>
        <el-collapse-item title="坐标轴设置" name="xAndYAxis" v-if="
                component.chartAllType.toLowerCase().indexOf('line') >= 0 ||
                  component.chartAllType.toLowerCase().indexOf('area') >= 0 ||
                  component.chartAllType.toLowerCase().indexOf('column') >= 0 ||
                  component.chartAllType.toLowerCase().indexOf('bar') >= 0
              ">
          <div
            class="cus-collapse-header df-c-b"
            @click="xAxisOpen = !xAxisOpen"
          >
            <span>X轴字体</span>
            <i :class="xAxisOpen ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" />
          </div>
          <div v-show="xAxisOpen" class="cus-collapse-content">
            <el-form-item label="x轴字体" class="df-form-item">
              <input-color-picker
                :input-width="140"
                :value="component.defaultOption.spec.axes[0].label.style.fill"
                @change="
                  (val) => {
                    component.defaultOption.spec.axes[0].label.style.fill = val;
                    reLoadChart();
                  }
                "
              />
            </el-form-item>
            <el-form-item label="自动旋转" class="df-form-item">
              <el-switch
                v-model="component.defaultOption.spec.axes[0].label.autoRotate"
                @change="changeAutoRotate(chartsComponents, component)"
              />
            </el-form-item>
            <el-form-item label="自动省略" class="df-form-item">
              <el-switch
                v-model="component.defaultOption.spec.axes[0].label.autoLimit"
                @change="reLoadChart()"
              />
            </el-form-item>
          </div>

          <div
            class="cus-collapse-header df-c-b"
            style="margin-top: 12px"
            @click="yAxisOpen = !yAxisOpen"
          >
            <span>Y轴字体</span>
            <i :class="yAxisOpen ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" />
          </div>
          <div v-show="yAxisOpen" class="cus-collapse-content">
            <el-form-item label="y轴字体" class="df-form-item">
              <input-color-picker
                :input-width="140"
                :value="component.defaultOption.spec.axes[1].label.style.fill"
                @change="
                  (val) => {
                    component.defaultOption.spec.axes[1].label.style.fill = val;
                    reLoadChart();
                  }
                "
              />
            </el-form-item>
            <el-form-item label="自动省略" class="df-form-item">
              <el-switch
                v-model="component.defaultOption.spec.axes[1].label.autoLimit"
                @change="reLoadChart()"
              />
            </el-form-item>
          </div>
        </el-collapse-item>

        <el-collapse-item title="标签设置" name="labelSet">
          <el-form-item label="是否显示" class="df-form-item">
            <el-switch
              v-model="component.defaultOption.spec.label.visible"
              @change="reLoadChart()"
            />
          </el-form-item>
          <el-form-item
            v-if="component.defaultOption.spec.label.visible"
            label="标签位置"
            class="df-form-item"
          >
            <el-select
              v-if="
                component.chartAllType.toLowerCase().indexOf('line') >= 0 ||
                  component.chartAllType.toLowerCase().indexOf('area') >= 0 ||
                  component.chartAllType.toLowerCase().indexOf('column') >= 0 ||
                  component.chartAllType.toLowerCase().indexOf('bar') >= 0
              "
              v-model="component.defaultOption.spec.label.position"
              placeholder="请选择"
              style="width: 100%"
              @change="reLoadChart()"
            >
              <el-option
                v-for="item in screenConstants.labelPosition"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
            <el-select
              v-if="component.chartAllType.toLowerCase().indexOf('pie') >= 0"
              v-model="component.defaultOption.spec.label.position"
              placeholder="请选择"
              style="width: 100%"
              @change="reLoadChart()"
            >
              <el-option
                v-for="item in screenConstants.pieLabelPosition"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="component.defaultOption.spec.label.visible"
            label="标签颜色"
            class="df-form-item"
          >
            <input-color-picker
              :input-width="140"
              :value="component.defaultOption.spec.label.style.fill"
              @change="
                (val) => {
                  component.defaultOption.spec.label.style.fill = val;
                  reLoadChart();
                }
              "
            />
          </el-form-item>
          <el-form-item
            v-if="component.defaultOption.spec.label.visible"
            label="字体大小"
            class="df-form-item"
          >
            <el-input
              v-model.number="component.defaultOption.spec.label.style.fontSize"
              style="width: 100%"
              @change="reLoadChart()"
            />
          </el-form-item>
          <el-form-item
            v-if="component.defaultOption.spec.label.visible"
            label="标签格式"
            class="df-form-item"
          >
            <el-input
              v-model.number="component.defaultOption.spec.label.formatter"
              style="width: 100px"
              @change="reLoadChart()"
            />
            &nbsp;<el-button
              type="text"
              @click="formatterRule()"
            >设置规则</el-button>
          </el-form-item>
        </el-collapse-item>
        <el-collapse-item title="图例设置" name="legends">
          <el-form-item label="是否显示" class="df-form-item">
            <el-switch
              v-model="component.defaultOption.spec.legends.visible"
              @change="reLoadChart()"
            />
          </el-form-item>
          <el-form-item
            v-if="component.defaultOption.spec.legends.visible"
            label="图例位置"
            class="df-form-item"
          >
            <el-select
              v-model="component.defaultOption.spec.legends.orient"
              placeholder="请选择"
              style="width: 100%"
              @change="reLoadChart()"
            >
              <el-option
                v-for="item in screenConstants.legendOrient"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="component.defaultOption.spec.legends.visible"
            label="对齐方式"
            class="df-form-item"
          >
            <el-select
              v-model="component.defaultOption.spec.legends.position"
              placeholder="请选择"
              style="width: 100%"
              @change="reLoadChart()"
            >
              <el-option
                v-for="item in screenConstants.legendPosition"
                :key="item.value"
                :label="item.name"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item
            v-if="component.defaultOption.spec.legends.visible"
            label="字体颜色"
            class="df-form-item"
          >
            <input-color-picker
              :input-width="140"
              :value="
                component.defaultOption.spec.legends.item.label.style.fill
              "
              @change="
                (val) => {
                  component.defaultOption.spec.legends.item.label.style.fill =
                    val;
                  reLoadChart();
                }
              "
            />
          </el-form-item>
        </el-collapse-item>
      </el-collapse>
    </el-form>
    <el-dialog
      title="添加"
      :visible.sync="addColorDialogVisiable"
      :close-on-click-modal="false"
      width="417px"
      @close="closeAddDialog"
    >
      <div class="cus-color-picker">
        <input-color-picker
          :value="color"
          @change="
            (val) => {
              color = val;
            }
          "
        />
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeAddDialog">取 消</el-button>
        <el-button
          type="primary"
          size="small"
          @click="confirmAddColor"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import InputColorPicker from '../../component/screen/colorpicker/inputColorPicker.vue'
import VChart from '@visactor/vchart'
export default {
  components: {
    InputColorPicker
  },
  props: {
    component: {
      type: Object,
      default: () => ({})
    },
    chartsComponents: {
      type: Object,
      default: () => ({})
    },
    datasets: {
      type: Array,
      default: () => []
    },
    isPreview: {
      type: Boolean,
      default: false
    },
    isCoedit: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      formCollapse: [
        'generalConfig',
        'chartStyle',
        'xAndYAxis',
        'labelSet',
        'legendSet'
      ],
      dataSetOpen: true,
      setWidthAndHeightOpen: true,
      xAxisOpen: true,
      yAxisOpen: true,

      predefineColors: [],
      addColorDialogVisiable: false,
      color: '',
      systemColor: '',
      datasetColumns: []
    }
  },
  watch: {
    'component.dataset'(newValue, oldValue) {
      this.changeDataset(true)
    }
  },
  mounted() {
    this.changeDataset(true)
    this.predefineColors = this.commonConstants.predefineColors
  },
  methods: {
    addColor() {
      this.addColorDialogVisiable = true
    },
    clearColor() {
      this.systemColor = ''
      if (this.component.chartAllType.toLowerCase().indexOf('map') >= 0) {
        this.component.defaultOption.spec.color.range = []
      } else {
        this.component.defaultOption.spec.color = []
      }
      this.reLoadChart()
    },
    confirmAddColor() {
      if (!this.color) {
        this.commonUtil.showMessage({
          message: '请选择颜色',
          type: this.commonConstants.messageType.error
        })
        return
      }
      if (this.component.chartAllType.toLowerCase().indexOf('map') >= 0) {
        this.component.defaultOption.spec.color.range.push(this.color)
      } else {
        this.component.defaultOption.spec.color.push(this.color)
      }

      this.reLoadChart()
      this.closeAddDialog()
    },
    closeAddDialog() {
      this.addColorDialogVisiable = false
      this.color = ''
    },
    confirmDeleteColor(index) {
      this.component.defaultOption.spec.color.splice(index, 1)
      this.reLoadChart()
    },
    confirmDeleteMapColor(index) {
      this.component.defaultOption.spec.color.range.splice(index, 1)
      this.reLoadChart()
    },
    changeAutoRotate(chartsComponents, component) {
      component.defaultOption.spec.axes[0].sampling =
        !component.defaultOption.spec.axes[0].label.autoRotate
      this.reLoadChart()
    },
    getColorLabel() {
      const type = this.component.chartAllType.toLowerCase()
      let label = ''
      if (type.indexOf('histogram') >= 0) {
        label = '柱体'
      } else if (type.indexOf('line') >= 0 || type.indexOf('area') >= 0) {
        label = '折线'
      }
      return label
    },
    radiusMiuns(type) {
      if (type == 1) {
        // 外半径
        this.component.defaultOption.spec.outerRadius = (
          Number(this.component.defaultOption.spec.outerRadius) - 0.1
        ).toFixed(1)
      } else {
        // 内半径
        this.component.defaultOption.spec.innerRadius = (
          Number(this.component.defaultOption.spec.innerRadius) - 0.1
        ).toFixed(1)
      }
      this.changeRadius(type)
    },
    radiusPlus(type) {
      if (type == 1) {
        // 外半径
        this.component.defaultOption.spec.outerRadius = (
          Number(this.component.defaultOption.spec.outerRadius) + 0.1
        ).toFixed(1)
      } else {
        // 内半径
        this.component.defaultOption.spec.innerRadius = (
          Number(this.component.defaultOption.spec.innerRadius) + 0.1
        ).toFixed(1)
      }
      this.changeRadius(type)
    },
    changeRadius(type) {
      if (type == 1) {
        if (this.component.defaultOption.spec.outerRadius > 1) {
          this.component.defaultOption.spec.outerRadius = 1.0
        } else if (this.component.defaultOption.spec.outerRadius < 0.1) {
          this.component.defaultOption.spec.outerRadius = 0.1
        }
      } else {
        if (this.component.defaultOption.spec.innerRadius > 1) {
          this.component.defaultOption.spec.innerRadius = 1.0
        } else if (this.component.defaultOption.spec.innerRadius < 0) {
          this.component.defaultOption.spec.innerRadius = 0.0
        }
      }
      this.component.defaultOption.spec.outerRadius = Number(
        this.component.defaultOption.spec.outerRadius
      )
      this.component.defaultOption.spec.innerRadius = Number(
        this.component.defaultOption.spec.innerRadius
      )
      this.reLoadChart()
    },
    formatterRule() {
      window.open(
        'https://www.visactor.io/vchart/guide/tutorial_docs/Chart_Plugins/Formatter'
      )
    },
    changeRadarColor(chartsComponents, component) {
      component.defaultOption.spec.axes[1].domainLine.style.stroke =
        component.defaultOption.spec.axes[0].grid.style.stroke
      component.defaultOption.spec.axes[1].grid.style.stroke =
        component.defaultOption.spec.axes[0].grid.style.stroke
      this.reLoadChart()
    },
    changeRadarLabelColor(chartsComponents, component) {
      component.defaultOption.spec.axes[0].label.style.fill =
        component.defaultOption.spec.axes[1].label.style.fill
      this.reLoadChart()
    },
    changeSystemColor() {
      const colors = this.screenConstants.systemChartColors[this.systemColor]
      if (this.component.chartAllType.toLowerCase().indexOf('map') >= 0) {
        this.component.defaultOption.spec.color.range = colors
      } else {
        this.component.defaultOption.spec.color = colors
      }
      this.reLoadChart()
    },
    reLoadChart() {
      luckysheet.renderChart()
    },
    rowColTrans() {
      luckysheet.rowColTrans(this.component)
    },
    changeDataset(isEdit) {
      for (let index = 0; index < this.datasets.length; index++) {
        const element = this.datasets[index]
        if (!isEdit) {
          this.component.categoryField = ''
          this.component.valueField = []
          this.component.seriesField = []
        }
        if (element.datasetName == this.component.dataset) {
          if (!element.columns || element.columns.length == 0) {
            this.getDatasetColumns(element, '1')
          } else {
            this.datasetColumns = element.columns
          }
          break
        }
      }
    },
    getDatasetColumns(element, type) {
      const obj = {
        url: this.apis.reportDesign.getDataSetColumnsApi,
        params: { id: element.id },
        removeEmpty: false
      }
      var that = this
      this.commonUtil.doPost(obj).then((response) => {
        element.columns = response.responseData
        that.datasetColumns = element.columns
      })
    },
    getChartType() {
      const chartAllType = this.component.chartAllType
      if (chartAllType == 'echarts|line|default') {
        return '折线图'
      } else if (chartAllType == 'echarts|line|smooth') {
        return '平滑折线图'
      } else if (chartAllType == 'echarts|area|default') {
        return '面积图'
      } else if (chartAllType == 'echarts|area|stack') {
        return '堆叠面积图'
      } else if (chartAllType == 'echarts|column|default') {
        return '柱状图'
      } else if (chartAllType == 'echarts|column|stack') {
        return '堆叠柱状图'
      } else if (chartAllType == 'echarts|bar|default') {
        return '条形图'
      } else if (chartAllType == 'echarts|bar|stack') {
        return '堆叠条形图'
      } else if (chartAllType == 'echarts|pie|default') {
        return '饼图'
      } else if (chartAllType == 'echarts|radar|default') {
        return '雷达图'
      }
    }
  }
}
</script>
<style scoped lang="scss">
.cus-collapse-header {
  height: 32px;
  line-height: 32px;
  padding: 0;
  font-size: 14px;
  cursor: pointer;
  margin-bottom: 4px;
}
.cus-collapse-content {
  border-radius: 4px;
  border: 0.5px solid rgba(23, 183, 148, 0.1);
  background: rgba(23, 183, 148, 0.05);
  padding: 8px 10px;
}
::v-deep .el-collapse-item {
  .el-collapse-item__header {
    position: relative;
    padding: 0 12px;
    height: 36px;
    line-height: 36px;
    background-color: #f9fafa;
    color: #666;
    font-size: 14px;
    font-weight: bold;
  }
  .el-collapse-item__wrap {
    padding: 16px;
    background-color: #fff;
  }
  .el-collapse-item__content {
    padding-bottom: 0;
  }
}

.df-form-item {
  display: flex;
  margin-right: 0;
  ::v-deep .el-form-item__label {
    // margin-right: 12px;
    flex-shrink: 0;
    width: 80px;
  }
  ::v-deep .el-form-item__content {
    flex: 1;
  }
}
.cus-color-picker {
  ::v-deep .el-input {
    width: 100% !important;
  }
}

::v-deep .el-form-item {
  margin-bottom: 8px;
}
::v-deep .el-form--label-top .el-form-item__label {
  padding-bottom: 0;
  line-height: 32px;
}
.el-form-item {
  margin-bottom: 5px !important;
}
::v-deep .el-form-item__label-wrap {
  margin-left: 0px !important;
}
::v-deep .el-color-picker__trigger {
  /* top:-12px */
}
::v-deep .customLabel {
  font-weight: bold;
}
::v-deep .customLabel .el-form-item__label {
  color: #15a585 !important;
}
.addBtn {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 2px 8px;
  height: 22px;
  background: #17b794;
  border-radius: 3px;
  flex: none;
  order: 1;
  flex-grow: 0;
  font-family: "PingFang SC";
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: #ffffff;
}
</style>
